<template>
  <div>
    <div class="banner-bg banner1-bg">
      <div class="w-1200-container h-full text-white flex justify-center">
        <div class="flex-1 pt-16 flex flex-col justify-center">
          <div class="pb-8 text-4xl font-bold">独角兽 / 瞪羚企业自评测</div>
          <div class="pb-2">欢迎您使独角兽/瞪羚企业自助评测服务</div>
          <div class="pb-2">
            本测试各项指标来源于全国各地发布的独角兽/瞪羚企业认定标准
          </div>
          <div class="pb-8">
            测试结果仅供参考，不作为独角兽/瞪羚企业官方认定结果
          </div>

          <el-button
            type="primary"
            class="w-32 h-12 rounded-3xl"
            @click.stop="linkTo('/exam/selectionPage')"
            >开始测试
          </el-button>
        </div>

        <el-image
          class="pt-8"
          style="width: 43.5rem; height: auto"
          fit="contain"
          :src="bannerImg1"
        >
          <div slot="placeholder">加载中<span class="dot">...</span></div>
        </el-image>
      </div>
    </div>

    <div class="banner-bg banner2-bg">
      <div class="w-1200-container p-4 pr-28 h-full flex justify-center">
        <el-image
          class="pt-8"
          style="width: 32.125rem; height: auto"
          fit="contain"
          :src="bannerImg2"
        >
          <div slot="placeholder">加载中<span class="dot">...</span></div>
        </el-image>

        <div class="flex-1 pt-16 flex flex-col justify-center items-end">
          <div class="pb-8 text-4xl font-bold">瞪羚企业培育咨询</div>
          <div class="pb-2">独角兽/瞪羚标准与政策解读</div>
          <div class="pb-2">独角兽/瞪羚遴选与发布</div>
          <div class="pb-8">独角兽/瞪羚跟踪与培育</div>

          <a
            href="https://www.yingyuchat.com/chatIndex?kefu_id=hjx123456&ent_id=625"
            target="_blank"
          >
            <el-button
              plain
              class="
                w-32
                h-12
                rounded-3xl
                bg-transparent
                border-blue-700
                text-blue-700
              "
              >点击咨询
            </el-button>
          </a>
        </div>
      </div>
    </div>

    <div class="banner-bg banner3-bg">
      <div class="w-1200-container p-4 pl-14 h-full flex justify-center">
        <div class="flex-1 pt-16 flex flex-col justify-center">
          <div class="pb-8 text-4xl font-bold">独角兽企业申请</div>
          <div class="pb-2">独角兽企业在线申报</div>
          <div class="pb-8">潜在独角兽企业在线申报</div>

          <el-button
            plain
            class="
              w-32
              h-12
              rounded-3xl
              bg-transparent
              border-blue-700
              text-blue-700
            "
            @click="linkTo('/policyDeclare')"
            >立即申请
          </el-button>
        </div>

        <el-image
          class="pt-8"
          style="width: 35rem; height: auto"
          fit="contain"
          :src="bannerImg3"
        >
          <div slot="placeholder">加载中<span class="dot">...</span></div>
        </el-image>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "exam",
  data() {
    return {
      bannerImg1: require("@/assets/images/exam/banner-1.png"),
      bannerImg2: require("@/assets/images/exam/banner-2.png"),
      bannerImg3: require("@/assets/images/exam/banner-3.png"),
    };
  },
  methods: {
    linkTo(url) {
      this.$router.push(url);
    },
  },
};
</script>

<style lang="scss" scoped>
.banner-bg {
  height: 31.25rem;
  @apply relative;
}

.banner1-bg {
  background: linear-gradient(316deg, #1a4dd8 0%, #161cd1 100%);
}

.banner2-bg {
  background: #fff;
}

.banner3-bg {
  background: #f5f9ff;
}
</style>
